<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ page isELIgnored="false"%>
<%@ taglib  uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="e" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="ex" uri="/WEB-INF/tld/showInformation.tld"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>薪酬管理系统--管理员部门管理</title>
    <link rel="stylesheet" type="text/css"
          href="/resources/css/styleSheet.css">
    <link rel="stylesheet"
          href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link
            href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
            rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <link  href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script
            src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body class="bg-light" style="padding-top: 10%;background-size: cover;">

<ex:Banner/>
<!-- 这里之后改一下 -->
<c:if test="${not empty admin}">

    <!--页面中心内容-->

    <div class="row">
        <div class="col-sm-2">
            <!--菜单组件：手风琴 panel-group容器-->
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                <!--面板-->
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingOne">
                        <h4 class="panel-title">
                            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                员工管理
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                        <div class="panel-body">
                            <!--嵌套列表组-->
                            <div class="list-group">

                                <a href="http://localhost:8080/admin/checkAllEmployees" class="list-group-item list-group-item-action">员工信息</a>
                                <li class="list-group-item"><a href="${pageContext.request.contextPath}/admin/payForEmployees">薪资发放</a></li>
                                <li class="list-group-item"><a href="${pageContext.request.contextPath}/admin/checkAllSalary">薪资列表</a></li>

                            </div>
                        </div>
                    </div>
                </div>

                <!--面板-->
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="empTitle">
                        <h4 class="panel-title">
                            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#empContent" aria-expanded="true" aria-controls="collapseOne">
                                部门管理
                            </a>
                        </h4>
                    </div>
                    <div id="empContent" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                        <div class="panel-body">
                            <!--嵌套列表组-->
                            <div class="list-group">

                                <a href="${pageContext.request.contextPath}/admin/checkAllDepart" class="list-group-item list-group-item-action">部门信息</a>
                                <a href="${pageContext.request.contextPath}/admin/getOneInfo" class="list-group-item list-group-item-action">部门结构</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-10">
            <div class="container py-5" >
                <h1 class="text-center my-4" style="border-bottom:5px ridge lightgrey;  margin-bottom: 10px; font-size: 4em; color:#000000; text-shadow: 2px 2px 4px rgba(0,0,0,0.5);">部门管理</h1>
                <div style="height: 30px">

                </div>

                <div class="row">
                    <div class="col-md-2">
                        <button class="btn btn-primary mb-3" onclick="showAddDepartmentModal()">添加部门</button>
                    </div>
                    <div class="col-lg-4">
                        <form action="${pageContext.request.contextPath}/admin/findDepartByKeys" method="GET" class="form-inline mb-3">
                            <div class="form-group">
                                <label for="searchKeys" class="sr-only">搜索：</label>
                                <input type="text" id="searchKeys" name="keys" class="form-control mr-2" placeholder="通过id/名称查找部门">
                            </div>
                            <button type="submit" class="btn btn-info">搜索</button>

                        </form>
                    </div>
                    <div class="col-md-2">
                        <form action="${pageContext.request.contextPath}/admin/checkAllDepart" method="GET" class="mb-3">
                            <button type="submit" class="btn btn-success btn-block">显示所有部门信息</button>
                        </form>
                    </div>
                </div>
                <div style="height: 20px">

                </div>

                <table class="table table-bordered table-hover">
                    <thead>
                    <tr>
                        <th>部门ID</th>
                        <th>部门名称</th>
                        <th>父部门ID</th>
                        <th>等级</th>
                        <th>基础薪资</th>
                        <th>编辑操作</th>
                        <th>删除操作</th>
                    </tr>
                    </thead>
                    <e:forEach items="${departmentList.items}" var="spit">
                        <tr>
                            <td><c:out value="${spit.departmentId}"/></td>
                            <td><c:out value="${spit.departmentName}"/></td>
                            <td><c:out value="${spit.fatherDepartmentId}"/></td>
                            <td><c:out value="${spit.ranking}"/></td>
                            <td><c:out value="${spit.basicSalary}"/></td>
                            <td><button class="btn btn-primary" onclick="showEditDepartmentModal()">编辑</button>

                            </td>
                            <td><form action="${pageContext.request.contextPath}/admin/deleteDepart" method="POST">
                                <input type="hidden" name="departmentId" value="${spit.departmentId}">
                                <button class="btn btn-danger" type="submit">删除</button>
                            </form>
                            </td>
                        </tr>
                    </e:forEach>
                    </tbody>
                </table>

                <div class="text-primary">
                    <c:if test="${departmentList.previousPage}">
                        <a href="<c:url value="/admin/checkAllDepart?pageNo=${departmentList.currentPageNo-1}" />" >上一页</a>
                    </c:if>
                    每页${departmentList.pageSize}位用户，  第${departmentList.currentPageNo}/${departmentList.totalPageCount}页,共${departmentList.totalCount}位用户

                    <c:if test="${departmentList.nextPage}">
                        <a href="<c:url value="/admin/checkAllDepart?pageNo=${departmentList.currentPageNo+1}" />" >下一页</a>
                    </c:if>
                </div>
                <script type="text/javascript">

                </script>


            </div>
            <div style="height: 30px; border-bottom:5px ridge lightgrey; margin-bottom: 10px;">

            </div>

            <div class="row">

                <div class="col-md-2 col-md-offset-1">
                    <form action="${pageContext.request.contextPath}/admin/checkAllDepart" method="GET" class="mb-3">
                        <button type="submit" class="btn btn-success btn-block">显示部门动态饼图</button>
                    </form>
                    <jsp:include page="dChart.jsp" />
                </div>

            </div>

            <!-- 部门添加模态框 -->
            <div class="modal" id="add-department-modal">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">添加部门</h4>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>
                        <div class="modal-body">
                            <form action="${pageContext.request.contextPath}/admin/addDepartment" method= "POST" id="add-department-form">
                                <div class="form-group">
                                    <label for="department-name">部门名称:</label>
                                    <input type="text" class="form-control" name="departmentName" required>
                                    <label for="father-department-id">父部门ID:</label>
                                    <input type="number" class="form-control" name="fatherDepartmentId" required>
                                    <label for="ranking">等级:</label>
                                    <select type="text" class="form-control" name="ranking">
                                        <option value="一级部门">一级部门</option>
                                        <option value="二级部门">二级部门</option>
                                        <option value="三级部门">三级部门</option>
                                    </select>
                                    <label for="basic-salary">基础薪资:</label>
                                    <input type="number" class="form-control" name="basicSalary"  required>

                                </div>
                                <button type="submit" class="btn btn-primary">提交</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 部门编辑模态框 -->
            <div class="modal" id="edit-department-modal">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">编辑部门</h4>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>
                        <div class="modal-body">
                            <form action="${pageContext.request.contextPath}/admin/updateDepartmentInfo" method= "POST" id="edit-department-form">
                                    <label for="department-id">部门ID:</label>
                                    <input type="number" class="form-control" id="department-id"  name="departmentId" required readonly>
                                    <label for="department-name">部门名称:</label>
                                    <input type="text" class="form-control" id="department-name" name="departmentName" required>
                                    <label for="father-department-id">父部门ID:</label>
                                    <input type="number" class="form-control" id="father-department-id"name="fatherDepartmentId" required>
                                    <label for="ranking">等级:</label>
                                    <select type="text" class="form-control" id="ranking"name="ranking">
                                        <option value="一级部门">一级部门</option>
                                        <option value="二级部门">二级部门</option>
                                        <option value="三级部门">三级部门</option>
                                    </select>
                                    <label for="basic-salary">基础薪资:</label>
                                    <input type="number" class="form-control" id="basic-salary"name="basicSalary"  required>
                                <button type="submit" class="btn btn-primary">提交</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <script>
                // 在这里添加JavaScript代码，用于获取部门数据，显示模态框，提交表单等
                // 获取部门数据

                // 显示添加部门模态框
                function showAddDepartmentModal() {
                    $('#add-department-modal').modal('show');
                }

                // 显示编辑部门模态框
                function showEditDepartmentModal() {

                        // 获取按钮的父元素，也就是 td 元素
                        var tdElement = event.target.parentNode;

                        // 获取 td 元素的父元素，也就是 tr 元素
                        var trElement = tdElement.parentNode;

                        // 获取 tr 元素的所有子元素，也就是所有的 td 元素
                        var tdElements = trElement.children;

                        // 显示模态框
                        // 这里假设你有一个名为 'editDepartmentModal' 的模态框
                        $('#edit-department-modal').modal('show');
                        // 将 td 元素的文本内容填入模态框的输入框中
                        document.getElementById('department-id').value = parseInt(tdElements[0].textContent.trim(), 10);
                        document.getElementById('department-name').value = tdElements[1].textContent;
                        document.getElementById('father-department-id').value = parseInt(tdElements[2].textContent.trim(), 10);
                        document.getElementById('ranking').value = tdElements[3].textContent;
                        document.getElementById('basic-salary').value = parseInt(tdElements[4].textContent.trim(), 10);

                }

            </script>
            <script>
                window.onload = function() {
                    var message = "${message}";  // 从后端获取的message
                    if (message) {
                        alert(message);
                        message = "";
                    }
                }
            </script>
        </div>
    </div>
</c:if>



<div style="height: 300px">

</div>

<!--统一的尾部：版权信息-->
<jsp:include page="information.jsp" />

<!-- jQuery and JavaScript Bundle with Popper -->
<script
        src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
        crossorigin="anonymous"></script>
<script
        src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
        crossorigin="anonymous"></script>
<script
        src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js"
        crossorigin="anonymous"></script>
<script type="text/javascript" src="script.js"></script>

</body>
</html>

